<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<view>
			<uni-nav-bar title="商品管理" :statusBar='true' :fixed="true"></uni-nav-bar>
		</view>
		<!-- #endif -->
		<view class="goodsmanage">
			<view class="goodsmanage-search">
				<view class="goodsmanage-search-wrap">
					<input v-model="searchValue" placeholder="搜索商品" class="goodsmanage-search-wrap-input" />
				</view>
			</view>
			<view class="goodsmanage-content">
				<!-- #ifdef APP-PLUS -->
				<scroll-view scroll-y :style="{ 'height': appListHeight + 'px' }" class="goodsmanage-content-left">
				<!-- #endif -->
				<!-- #ifndef APP-PLUS -->
				<scroll-view scroll-y :style="{ 'height': h5ListHeight + 'px' }" class="goodsmanage-content-left">
				<!-- #endif -->
					<view @click="onClickChangeSelectIndex(0)" class="goodsmanage-content-left-item" :class="{ 'goodsmanage-content-left-item-active': selectIndex === 0 }">全部</view>
					<view @click="onClickChangeSelectIndex(index + 1)" v-for="(item, index) of leftArr" :key="item.id" :class="{ 'goodsmanage-content-left-item-active': selectIndex === (index + 1) }" class="goodsmanage-content-left-item">{{ item.name }}</view>
				</scroll-view>
				
				<!-- #ifdef APP-PLUS -->
				<scroll-view @scrolltolower="handleIngScrolltolower" :scroll-with-animation='true' scroll-y :style="{ 'height': appListHeight + 'px' }" class="goodsmanage-content-right">
				<!-- #endif -->
				<!-- #ifndef APP-PLUS -->
				<scroll-view @scrolltolower="handleIngScrolltolower" :scroll-with-animation='true' scroll-y :style="{ 'height': h5ListHeight + 'px' }" class="goodsmanage-content-right">
				<!-- #endif -->
					<view v-for="item of rightArr" :key="item.id" class="goodsmanage-content-right-item">
						<image class="goodsmanage-content-right-item-img" :src="commonImg(item.myShowImg)"></image>
						<view class="goodsmanage-content-right-item-handle">
							<view class="goodsmanage-content-right-item-handle-name">
								<view class="goodsmanage-content-right-item-handle-name-left">{{ item.name }}</view>
								<view class="goodsmanage-content-right-item-handle-name-right goodsmanage-content-right-item-handle-name-right-dsh" v-if="item.status === '0'">待审核</view>
								<view class="goodsmanage-content-right-item-handle-name-right goodsmanage-content-right-item-handle-name-right-btg" v-if="item.status === '2'">审核不通过</view>
							</view>
							<view class="goodsmanage-content-right-item-handle-price">原价：¥{{ item.price }}</view>
							<view class="goodsmanage-content-right-item-handle-kc">库存：{{ item.stock }}个</view>
							<view class="goodsmanage-content-right-item-handle-handle">
								<view @click="onClickMofidy(item)" class="goodsmanage-content-right-item-handle-handle-item">编辑</view>
								<view @click="onClickSXJ(item)" class="goodsmanage-content-right-item-handle-handle-item">{{ item.onSale === '0' ? '上架' : item.onSale === '1' ? '下架' : '' }}</view>
								<view @click="onClickDelItem(item)" class="goodsmanage-content-right-item-handle-handle-item goodsmanage-content-right-item-handle-handle-item-del">删除</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import { config } from '@/utils/config.js'
	import { myMixin } from '@/utils/mixin.js'
	export default {
		mixins: [myMixin],
		data() {
			return {
				leftArr: [], // 商品分类
				selectIndex: 0,
				h5ListHeight: 0,
				appListHeight: 0,
				rightArr: [],
				searchValue: '',
				page: 1,
				size: 10,
				total: 0,
				totalPage: 0
			}
		},
		components: {
			uniNavBar
		},
		onLoad() {
			const token = uni.getStorageSync('h_token')
			if (!token) {
				uni.showToast({
					icon: 'none',
					title: '尚未登录, 请先登录'
				})
				setTimeout(() => {
					uni.removeStorageSync('h_role')
					uni.removeStorageSync('h_memberId')
					uni.removeStorageSync('h_token')
					uni.removeStorageSync('h_openId')
					uni.reLaunch({
						url: '../verificationcodelogin/verificationcodelogin'
					})
				}, 777)
				return false
			}
			this._getCategoryGoods()
		},
		onReady() {
			const that = this
			uni.getSystemInfo({
				success: ((res) => {
					let info = uni.createSelectorQuery().select(".goodsmanage-search");
					info.boundingClientRect(function(data) {
						that.h5ListHeight = res.windowHeight - data.height // 小程序和H5是可以这么设置，但是到了自定义头部的时候，是不允许这么设置的
						that.appListHeight = res.windowHeight - res.statusBarHeight - 44 - data.height
					}).exec()
				})
			})
		},
		onPullDownRefresh() {
			this.page = 1
			this.size = 10
			this.total = 0
			this.totalPage = 0
			this.rightArr = []
			this._getContent(this.selectIndex)
		},
		methods: {
			handleIngScrolltolower() {
				const page1 = this.page + 1;
				const totalPage = this.totalPage
				if (page1 <= totalPage) {
					this.page = page1
					this._getContent(this.selectIndex)
				} else {
					uni.showToast({
						title: '已经到底部了',
						icon: 'none'
					})
				}
			},
			_getCategoryGoods() {
				uni.request({
					url: `${config.api_base_url}merchant/goods/goodsCategory`,
					header: {
						AUTH: 'ROBOT ' + uni.getStorageSync('h_token')
					},
					success: ((res) => {
						let { status, data } = res.data
						if (status.flag === true) {
							this.leftArr = data
							this._getContent(0)
						} else {
							this.leftArr = []
						}
					}),
					fail: (() => {
						uni.showToast({
							icon: 'none',
							title: '请求分类失败, 网络异常'
						})
					})
				})
			},
			onClickDelItem(obj) {
				const id = obj.id
				if (!id) {
					return false
				}
				uni.showModal({
					content: `确定要删除${obj.name}吗?`,
					success: ((res_c) => {
						if (res_c.confirm) {
							uni.request({
								url: `${config.api_base_url}merchant/goods/deleteGoods/${id}`,
								method: 'PUT',
								data: {},
								header: {
									AUTH: 'ROBOT ' + uni.getStorageSync('h_token')
								},
								success: ((res) => {
									let { status, data } = res.data
									if (status.flag === true) {
										uni.showToast({
											icon: 'none',
											title: '删除成功'
										})
										this.page = 1
										this.size = 10
										this.total = 0
										this.totalPage = 0
										this.rightArr = []
										this._getContent(this.selectIndex)
									} else {
										uni.showToast({
											icon: 'none',
											title: status.msg
										})
									}
								}),
								fail: (() => {
									uni.showToast({
										icon: 'none',
										title: '删除失败, 网络异常'
									})
								})
							})
						}
					})
				})
			},
			onClickMofidy(obj) {
				uni.navigateTo({
					url: `../addgoods/addgoods?id=${obj.id}`
				})
			},
			onClickSXJ(obj) {
				const onSale = obj.onSale === '1' ? '0' : obj.onSale === '0' ? '1' : ''
				uni.request({
					url: `${config.api_base_url}merchant/goods/onSaleGoods/${obj.id}/${onSale}`,
					method: 'PUT',
					data: {},
					header: {
						AUTH: 'ROBOT ' + uni.getStorageSync('h_token')
					},
					success: ((res) => {
						let { status, data } = res.data
						if (status.flag === true) {
							uni.showToast({
								icon: 'none',
								title: '保存成功'
							})
							this.page = 1
							this.size = 10
							this.total = 0
							this.totalPage = 0
							this.rightArr = []
							this._getContent(this.selectIndex)
						} else {
							uni.showToast({
								icon: 'none',
								title: status.msg
							})
						}
					}),
					fail: (() => {
						uni.showToast({
							icon: 'none',
							title: '保存失败, 网络异常'
						})
					})
				})
			},
			onClickChangeSelectIndex(index) {
				if (this.selectIndex === index) {
					return false
				}
				this.selectIndex = index
				this.page = 1
				this.size = 10
				this.total = 0
				this.totalPage = 0
				this.rightArr = []
				this._getContent(index)
			},
			pageTotal(rowCount, pageSize) {
				if (rowCount === null || rowCount === "") {
					return 0;
				} else {
					if ((pageSize !== 0) && (rowCount % pageSize === 0)) {
						return parseInt(rowCount / pageSize)
					}
					if ((pageSize !== 0) && (rowCount % pageSize !== 0)) {
						return parseInt(rowCount / pageSize) + 1
					}
				}
			},
			_getContent(index) {
				if (index === 0) {
					const page = this.page
					const size = this.size
					uni.request({
						url: `${config.api_base_url}merchant/goods/findGoodsByStoreId/${page}/${size}`,
						header: {
							AUTH: 'ROBOT ' + uni.getStorageSync('h_token')
						},
						success: ((res) => {
							let { status, data } = res.data
							if (status.flag === true) {
								this.total = data.total
								this.totalPage = this.pageTotal(this.total, this.size)
								for (const item of data.rows) {
									if (item.images) {
										item.myShowImg = JSON.parse(item.images).img1
									}
								}
								this.rightArr = this.rightArr.concat(data.rows)
							} else {
								this.total = 0
								this.totalPage = 0
								this.rightArr = []
							}
						}),
						fail: (() => {
							uni.showToast({
								icon: 'none',
								title: '请求全部商品失败, 网络异常'
							})
						}),
						complete: (() => {
							uni.stopPullDownRefresh()
						})
					})
				} else {
					const page = this.page
					const size = this.size
					const categoryId = this.leftArr[index - 1].id
					uni.request({
						url: `${config.api_base_url}merchant/goods/findGoodsByCategoryId/${categoryId}/${page}/${size}`,
						header: {
							AUTH: 'ROBOT ' + uni.getStorageSync('h_token')
						},
						success: ((res) => {
							let { status, data } = res.data
							if (status.flag === true) {
								this.total = data.total
								this.totalPage = this.pageTotal(this.total, this.size)
								for (const item of data.rows) {
									if (item.images) {
										item.myShowImg = JSON.parse(item.images).img1
									}
								}
								this.rightArr = this.rightArr.concat(data.rows)
							} else {
								this.total = 0
								this.totalPage = 0
								this.rightArr = []
							}
						}),
						fail: (() => {
							uni.showToast({
								icon: 'none',
								title: '查询数据失败, 网络异常'
							})
						}),
						complete: (() => {
							uni.stopPullDownRefresh()
						})
					})
				}
			},
		}
	}
</script>
<style>
	page {
		background-color: #F5F5F5;
	}
</style>
<style scoped>
.goodsmanage {
	width: 100%;
	display: flex;
	flex-direction: column;
}
.goodsmanage-search {
	width: 100%;
	box-sizing: border-box;
	background-color: #F6F6F6;
	height: 100rpx;
	padding-left: 18rpx;
	padding-right: 18rpx;
	padding-bottom: 18rpx;
	padding-top: 12rpx;
}
.goodsmanage-search-wrap {
	width: 100%;
	height: 100%;
	border-radius: 35rpx;
	background-color: #fff;
}
.goodsmanage-search-wrap-input {
	background-color: #fff;
	width: 100%;
	height: 100%;
	border-radius: 35rpx;
	display: block;
	font-size: 28rpx;
	box-sizing: border-box;
	padding-left: 38rpx;
}
.goodsmanage-content {
	width: 100%;
	display: flex;
}
.goodsmanage-content-left {
	width: 160rpx;
	background-color: #F1F1F1;
	display: flex;
	flex-direction: column;
}
.goodsmanage-content-left-item {
	width: 100%;
	height: 70rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 24rpx;
	color: #444444;
}
.goodsmanage-content-left-item-active {
	background-color: #fff;
}
.goodsmanage-content-right {
	flex: 1;
	background-color: #fff;
	box-sizing: border-box;
	padding-top: 20rpx;
	padding-right: 42rpx;
	padding-left: 18rpx;
	display: flex;
	flex-direction: column;
}
.goodsmanage-content-right-item {
	margin-bottom: 28rpx;
	display: flex;
	align-items: flex-start;
}
.goodsmanage-content-right-item-img {
	width: 160rpx;
	height: 160rpx;
	border-radius: 12rpx;
}
.goodsmanage-content-right-item-handle {
	margin-left: 18rpx;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.goodsmanage-content-right-item-handle-name {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 10rpx;
}
.goodsmanage-content-right-item-handle-name-left {
	font-size: 28rpx;
	color: #000000;
	font-weight: 600;
	line-height: 40rpx;
}
.goodsmanage-content-right-item-handle-name-right {
	font-size: 24rpx;
	font-weight: 400;
}
.goodsmanage-content-right-item-handle-name-right-dsh {
	color: #F7B500;
}
.goodsmanage-content-right-item-handle-name-right-btg {
	color: #F02230;
}
.goodsmanage-content-right-item-handle-price {
	font-size: 24rpx;
	color: #000000;
	line-height: 34rpx;
}
.goodsmanage-content-right-item-handle-kc {
	font-size: 24rpx;
	color: #000000;
	line-height: 34rpx;
	margin-bottom: 16rpx;
}
.goodsmanage-content-right-item-handle-handle {
	display: flex;
}
.goodsmanage-content-right-item-handle-handle-item {
	width: 96rpx;
	height: 50rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 24rpx;
	box-sizing: border-box;
	border: 1px solid #1677FF;
	color: #1677FF;
	margin-right: 18rpx;
	border-radius: 12rpx;
}
.goodsmanage-content-right-item-handle-handle-item-del {
	border-color: #FF3232;
	color: #FF3232;
}
.goodsmanage-content-right-item-handle-handle-item:last-child {
	margin-right: 0;
}
.goodsmanage-content-right-item:last-child {
	margin-bottom: 0;
}
</style>